<template>
  <div class="manual-input-card">
    <div class="card-content">
      <!-- 更换零件卡片 -->
      <div class="info-card" :class="{ 'filled': formData.productionPart }" @click="openPartDialog">
        <div class="fill-indicator"></div>
        <div class="card-label">
          更换零件
          <el-tooltip content="确认当前设备正在生产的零件型号。这有助于评估故障对生产计划的影响和制定相应的应对措施。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-value" v-if="formData.productionPart">
          {{ formData.productionPart }}
        </div>
        <div class="card-placeholder" v-else>
          点击确认更换零件
        </div>

      </div>

      <!-- 现场记录卡片已移动到ProcessingInfoForm -->

      <!-- 验收结果卡片 -->
      <div class="info-card" :class="{ 'filled': formData.acceptanceResult }" @click="openAcceptanceDialog">
        <div class="fill-indicator"></div>
        <div class="card-label">
          验收结果
          <el-tooltip content="对维修结果进行专业验收，确认设备是否恢复正常。通过表示可以投入使用，不通过需要继续维修，待复检表示需要进一步观察。" placement="top">
            <i class="el-icon-question help-icon"></i>
          </el-tooltip>
        </div>
        <div class="card-value" v-if="formData.acceptanceResult !== undefined && formData.acceptanceResult !== ''">
          {{ getAcceptanceLabel(formData.acceptanceResult) }}
        </div>
        <div class="card-placeholder" v-else>
          点击设置验收结果
        </div>

      </div>
    </div>

    <!-- 更换零件弹窗 -->
    <el-dialog
      title="更换零件确认"
      :visible.sync="partDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      :before-close="() => closeDialog('part')">
      <el-input
        v-model="tempPart"
        placeholder="请确认当前实际生产的零件"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('part')">取消</el-button>
        <el-button type="primary" @click="savePart">确定</el-button>
      </div>
    </el-dialog>

    <!-- 现场记录弹窗已移动到ProcessingInfoForm -->

    <!-- 验收结果弹窗 -->
    <el-dialog
      title="验收结果"
      :visible.sync="acceptanceDialogVisible"
      width="400px"
      :close-on-click-modal="false"
      :before-close="() => closeDialog('acceptance')">
      <el-radio-group v-model="tempAcceptance">
        <el-radio :label="1" class="acceptance-radio pass">✅ 通过</el-radio>
        <el-radio :label="2" class="acceptance-radio fail">❌ 不通过</el-radio>
        <!-- <el-radio :label="0" class="acceptance-radio pending">⏳ 待复检</el-radio> -->
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('acceptance')">取消</el-button>
        <el-button type="primary" @click="saveAcceptance">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'

export default {
  name: 'ManualInputForm',
  mixins: [dialogMixin],
  props: {
    formData: {
      type: Object,
      required: true
    },
    compact: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      partDialogVisible: false,
      acceptanceDialogVisible: false,
      tempPart: '',
      tempAcceptance: ''
    }
  },
  methods: {
    validate() {
      // 简单验证必填字段
      if (!this.formData.productionPart) {
        this.$message.error('请确认更换零件');
        return Promise.reject();
      }
      // 现场观察记录验证已移动到 ProcessingInfoForm
      return Promise.resolve();
    },

    openPartDialog() {
      this.safeOpenDialog(() => {
        this.tempPart = this.formData.productionPart || '';
        this.partDialogVisible = true;
      });
    },

    // openObservationDialog 已移动到 ProcessingInfoForm

    openAcceptanceDialog() {
      this.safeOpenDialog(() => {
        this.tempAcceptance = this.formData.acceptanceResult || '';
        this.acceptanceDialogVisible = true;
      });
    },

    closeDialog(type) {
      this.safeCloseDialog(() => {
        switch(type) {
          case 'part':
            this.partDialogVisible = false;
            break;
          case 'acceptance':
            this.acceptanceDialogVisible = false;
            break;
        }
      });
    },

    savePart() {
      this.formData.productionPart = this.tempPart;
      this.closeDialog('part');
    },

    // saveObservation 已移动到 ProcessingInfoForm

    saveAcceptance() {
      this.formData.acceptanceResult = Number(this.tempAcceptance);
      this.closeDialog('acceptance');
    },

    getAcceptanceLabel(val) {
      const map = { 0: '待复检', 1: '通过', 2: '不通过' };
      return map[val] || val;
    }
  }
}
</script>

<style scoped>
/* 现场确认卡片容器 */
.manual-input-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}



/* 卡片内容 */
.card-content {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 信息卡片 */
.info-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 16px 16px 24px;
  cursor: pointer;
  position: relative;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
}

/* 填写状态指示器 */
.fill-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e2e8f0;
  border-radius: 12px 0 0 12px;
  transition: all 0.3s ease;
}

.info-card.filled .fill-indicator {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.info-card.full-width {
  grid-column: 1 / -1;
}



.card-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-icon {
  font-size: 14px;
  color: #9ca3af;
  cursor: help;
  transition: color 0.2s ease;
}

.help-icon:hover {
  color: #6b7280;
}

.card-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
  flex: 1;
}

.card-placeholder {
  font-size: 14px;
  color: #94a3b8;
  font-style: italic;
  flex: 1;
}



/* 验收结果单选按钮样式 */
.acceptance-radio {
  display: block;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
}

.acceptance-radio.pass {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.acceptance-radio.fail {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.acceptance-radio.pending {
  background: #fffbeb;
  border: 1px solid #fed7aa;
}

/* 弹窗样式 */
.clean-textarea >>> .el-textarea__inner {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
}

.clean-textarea >>> .el-textarea__inner:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* 弹窗z-index修复 */
.el-dialog__wrapper {
  z-index: 3000 !important;
}

.el-overlay {
  z-index: 2999 !important;
}

/* 下拉选择器z-index修复 */
.el-select-dropdown {
  z-index: 3001 !important;
}

.el-popper {
  z-index: 3001 !important;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}



/* 响应式设计 */
@media (max-width: 768px) {
  .card-content {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.header-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

/* 人工输入表单项样式 */
.manual-form-item {
  margin-bottom: 28px;
}

.manual-form-item >>> .el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}

/* 人工字段容器 */
.manual-field-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}



.manual-field-container:focus-within {
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

/* 人工输入框样式 */
.manual-input >>> .el-input__inner,
.manual-input >>> .el-textarea__inner {
  border: none;
  background: transparent;
  font-size: 14px;
  color: #2d3748;
  font-weight: 400;
  padding: 0;
  line-height: 1.5;
}

.manual-input >>> .el-input__inner:focus,
.manual-input >>> .el-textarea__inner:focus {
  box-shadow: none;
}

.manual-input >>> .el-input__inner::placeholder,
.manual-input >>> .el-textarea__inner::placeholder {
  color: #a0aec0;
  font-style: italic;
}

/* 字段提示样式 */
.field-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: #f7fafc;
  border-radius: 6px;
  border-left: 3px solid #4299e1;
}

.hint-icon {
  font-size: 14px;
  margin-top: 1px;
}

.hint-text {
  font-size: 12px;
  color: #718096;
  line-height: 1.4;
}

/* 处理人员选项 */
.handler-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.handler-option small {
  color: #718096;
  font-size: 12px;
}

/* 单选按钮样式 */
.radio-label {
  font-weight: 500;
  margin-left: 4px;
}

/* 人工标签样式 */
.manual-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #718096, #4a5568);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(113, 128, 150, 0.3);
}

.manual-icon {
  font-size: 14px;
}

.manual-text {
  letter-spacing: 0.5px;
}

.section-desc {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

/* 提示切换按钮 */
.hint-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  color: #718096;
  cursor: pointer;
  margin-top: 8px;

}


</style>
